<!--
 * @Descripttion: 订单搜索结果页
 * @version:
 * @Author: lehaixia
 * @Date: 2022-10-27 20:11:36
 * @LastEditors: lehaixia
 * @LastEditTime: 2022-11-15 09:30:03
-->
<template>
  <div class="content">
    <ComHeader :arrow="true" :border="false" bg-color="#F5F6F7" title="订单搜索结果" @get-height="handleHeadHeight" />
    <div class="page-search" :style="{'top':headHeight+'px'}">
      <SearchInput v-model="searchValue" class="search" :icon-right="false" placeholder="请输入接单号或顾客姓名" @search="handleSearch" @enter="handleSearch" />
    </div>
    <List
      ref="list"
      class="order-list-page"
      :class="{'list-scroll':list.length>0}"
      :finished.sync="finished"
      :reset-fun="resetData"
      :load="load"
      :refresh="load"
      :default-active="true"
    >
      <Item
        v-for="(c,i) in list"
        ref="refItem"
        :key="i"
        :item-data="c"
        :order-status-list="orderStatusList"
      />
    </List>
  </div>
</template>
<script>
import SearchInput from '@/components/SearchInput'
import List from '@/components/List'
import Item from './components/Item'
import { getOrderList } from '@/apis/purOrder'
import { json2FormData } from '@/utils'
import { getDictByPatchType } from '@/apis/dataDict'

export default {
  name: 'SearchResult',
  components: { SearchInput, List, Item },
  props: {},
  data() {
    return {
      headHeight: 50,
      searchValue: '',
      orderStatusList: [],
      list: [],
      finished: false // 列表是否加载完成
    }
  },
  computed: {},
  watch: {},
  async created() {
    const { keyword } = this.$route.query
    this.searchValue = keyword
    const dictTypeCodes = ['CRM_PURCHASE_ORDER_STATUS']
    const dictData = await getDictByPatchType({ dictTypeCodes })
    this.orderStatusList = dictData.CRM_PURCHASE_ORDER_STATUS || []
  },
  // 方法集合
  methods: {
    handleHeadHeight(h) {
      this.headHeight = h
    },
    handleSearch(value) {
      this.searchValue = value
      this.resetPageData()
    },
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, rows) {
      let paramsRaw = { queryFollowUpUser: 1 }
      if (this.searchValue) {
        paramsRaw = Object.assign({}, paramsRaw, { searchKeyword: this.searchValue })
      }
      const data = json2FormData({
        filtersRaw: JSON.stringify([]),
        paramsRaw: JSON.stringify(paramsRaw),
        sort: 'createTime',
        order: 'desc',
        page,
        rows
      })
      return getOrderList(data).then(res => {
        const records = res.data.records || []
        this.list.push(...records)
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    }
  }
}
</script>
<style lang='less' scoped>
.page-search{
  position: fixed;
  top: 46px;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #fff;

  .search {
    ::v-deep .van-field__control::-webkit-input-placeholder {
      font-size: 14px;
      font-weight: 400;
      color: #B5B7C4;
      line-height: 20px;
    }
    ::v-deep .search-input {
      border-radius: 12px;
    }
  }
}

.order-list-page{
  flex: 1;
  margin-top: 82px;
  padding-top: 16px;
  box-sizing: border-box;
  position: relative;
  min-height: 50vh;
  box-sizing: border-box;
  .page-list{
    padding:0 16px;
  }
  .c-list-scroll{
    min-height: calc(100vh - 142px - 46px - 80px);
    box-sizing: border-box;
  }
  /deep/.page-slide-list{
    padding: 0 16px;
  }
}
</style>
